
<template>

  <div>
    <el-button type="text" style="margin-left: 16px" @click="this.$router.push('/order');">
      返回
    </el-button>
  </div>


  <div id="app">
    <div id="section-to-print">
  <el-container>

    <el-header style="height: 70px">
      <h1>订单详情</h1>
    </el-header>
    <el-main class="ttbba">
      <el-card>
        <div slot="header" class="clearfix">
          <span>订单编号: {{ form.oid }}</span>
        </div>
        <div>
          <p><strong>下单时间:</strong> {{ form.orderDate }}</p>
          <p><strong>订单类型:</strong> {{ form.otype }}</p>
          <p><strong>客户姓名:</strong> {{ form.uname }}</p>
          <p><strong>联系方式:</strong> {{ form.uphone }}</p>
          <p><strong>地址:</strong> {{ form.area }} {{ form.place }}</p>
          <p><strong>快递方式:</strong> {{ form.way }}</p>
        </div>
      </el-card>

      <el-table :data="form.goods" style="width: 100%">
        <el-table-column property="gcode" label="商品编码" width="180"></el-table-column>
        <el-table-column property="gname" label="商品名称"></el-table-column>
        <el-table-column property="gbrand" label="品牌" width="120"></el-table-column>
        <el-table-column property="gmodel" label="型号" width="120"></el-table-column>
        <el-table-column property="gcolor" label="颜色" width="150"></el-table-column>
        <el-table-column property="purchasePrice" label="采购价" width="120">
          <template #default="{ row }">
            <span>￥{{ row.purchasePrice.toFixed(2) }}</span>
          </template>
        </el-table-column>

        <el-table-column property="stock" label="数量" width="80"></el-table-column>
      </el-table>
      <el-card>
        <div slot="header" class="clearfix">
          <span>总计: {{ money }}.00</span>
        </div>
        <div>
          <p><strong>支付方式:</strong> {{ form.payway }}</p>
        </div>
      </el-card>
      <div  style="text-align: right;">
        <p><strong>总金额:</strong> {{ money }}.00</p>
      </div>

    </el-main>

  </el-container>

    </div>
     <el-card style="text-align: center"> <el-button type="success"  @click="printSection">下载</el-button></el-card>

    </div>
</template>
<script setup>
import axios from "@/plugins/axios.js";
import {onMounted, reactive, ref} from "vue";

import html2pdf from 'html2pdf.js';

const printSection = () => {
  const element = document.getElementById('section-to-print');
  const opt = {
    margin:       1,
    filename:     '订单详情.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2 },
    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
  };

  // 从HTML生成PDF并下载
  html2pdf().from(element).set(opt).save();
};


const form = reactive({
  oid: 1001,
  orderDate: "2024-08-02 17:08:56",
  otype: "网络订单",
  uname: "马嘉伦",
  uphone: "10-4772-3990",
  area: "北京市",
  place: "",
  payway: "",
  way: "",
  goods: [],
});

let money = ref()

// 从 sessionStorage 获取订单详情
const orderDetails = JSON.parse(sessionStorage.getItem('orderDetails'));

const fetchData = async () => {

  console.log(orderDetails)

  try {
    const res = await axios.postJson(`/order/detil?oid=${orderDetails}`);
    if (res.code === 200) {
      money = res.money
      Object.assign(form, res.data); // 假设这里直接替换了 orderData
      console.log(res.money)


    } else {
      console.error('请求失败:', res.message || '未知错误');
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
};


// 初始化数据
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.el-header {
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
}

.el-card {
  margin-bottom: 20px;
}
.ttbba {
  width: 1000px;
  margin: 0 auto; /* 上下为 0，左右自动 */
}
</style>
